<template lang="pug">
.list
  div.cont         
    .top <!--搜索区域-->
      .search
        el-input(type="text" placeholder="品牌名称/注册商标号" v-model="searchString" @change="changeSearch" clearable prefix-icon="el-icon-search" )
      .set
        el-button(class="icon-tianjia" @click="add" v-if="$permission('AB-03001-001')" type="primary" size="small") 添加
        el-button(class="el-icon-setting" size="small" @click="settingHeader") 

    .table <!--表格区域-->
      el-table(
        height="100%"
        :data="tableData"
        :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
        border
        style="width: 100%"
        v-loading="loading"
        empty-text="未找到符合条件的内容"
      )
        el-table-column(v-if="currentList.length" type="index" width="55" align="center" label="序号")
        el-table-column(
          v-for="item, index in currentList"
          :key="index"
          :label="item.name"
          :min-width="item.minWidth"
          :sortable="item.sortable"
          :align="item.align"
          :prop="item.key"
          align="center"
        )
          template(slot-scope="scope")
            .table-item-bd.flex.click(v-if="item.key === 'logoUrl'")
              img(:src="scope.row.logoUrl" style="width:80px;height:80px")
            .table-item-bd.flex.click(v-else-if="item.key === 'name'" @click="edit(scope.row)")
              .table-item-name {{scope.row.name}}
            .table-item-bd.flex.click(v-else-if="item.key === 'isImport'")
              .table-item-isImport(v-if="scope.row.isImport == 1") 进口 
              .table-item-isImport(v-if="scope.row.isImport == 2") 国产
            .table-item-bd(v-else-if="item.key === 'createTime'") {{scope.row[item.key] | filterDate}}  
            .table-item-bd(v-else-if="item.key === 'handle'")
              .table-item-handle
                .table-item-btn.info(@click="delBrand(scope.row)" v-if="$permission('AB-03001-002')") 删除
            .table-item-text(v-else) {{scope.row[item.key]}}
        
    .index-pagination <!--分页区域-->
      .pagination-total 共 {{ total }} 条
      .pagination-sizes 20 条/页
      el-pagination(
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
      )
    //-添加品牌弹框
    add-brand-model(:show="showDialog" :item="currentItem" @close="closeModal" @confirm="confirmModal")
    //- 自定义列表弹框
    set-table-header(
      :show="showDialogBrand"
      :allHeaderList="allHeaderList"
      :defaultList="defaultList"
      :currentList="currentList"
      :filterHeaders="filterHeaders"
      type="3"
      @close="closeDialog"
      @confirm="confirmDialog"
    )    
</template>

<script>
import { getBrandList,getTableMenu,deleteBrand,getBrandInformation } from 'api'
import addBrandModel from '@/components/modal/addBrandModel'
import setTableHeader from '@/components/modal/setTableHeader'
export default {
  name: 'brandBase',
  components: {
    addBrandModel,
    setTableHeader
  },
  data () {
    return {
      total:0,
      currentPage: 1,
      pageSize:20,
      searchString:'',
      tableData:[],
      logoUrl:'',
      showDialog:false,
      currentItem: {},
      dialogCustomizeVisible:false,    
      list: [],
      loading: false,
      showDialogBrand:false,  
      allHeaderList: [
        { name: "产地", key: 'isImport' },
        { name: "注册商标", key: 'trademarkRegistrationNumber' },
        { name: "品牌公司", key: 'brandCompany' },
        { name: "入库时间", key: 'createTime' },
        { name: "已关联代理公司数", key: 'supplierAmount' },
        { name: "已关联上架材料数", key: 'materialAmount' }
      ],
      filterHeaders: ['logoUrl', 'name', 'handle'],
      defaultList: [
        { name: "品牌logo", key: 'logoUrl', isDisable: true, minWidth: 100 },
        { name: "品牌名称", key: 'name', isDisable: true,},
        { name: "产地", key: 'isImport' },
        { name: "注册商标", key: 'trademarkRegistrationNumber' },
        { name: "品牌公司", key: 'brandCompany' },
        { name: "入库时间", key: 'createTime' },
        { name: "操作", key: 'handle', isDisable: true }
      ],
      currentList: [],
    }
  },
  methods:{
     // 搜索
    changeSearch () {
      this.currentPage = 1
      this.getBrandLibraryList()
    },
    closeModal () {
      this.showDialog = false
      this.currentItem = {}
      console.log(this.currentItem)
    },
    confirmModal () {
      this.showDialog = false
      this.currentItem = {}
      this.getBrandLibraryList()
    },
    // 打开自定义列表弹框
    settingHeader () {
      this.showDialogBrand = true
    },
    // 关闭自定义列表弹框
    closeDialog () {
      this.showDialogBrand = false
      this.getTableMenu()
    },
    confirmDialog () {
      this.showDialogBrand = false
      this.getTableMenu()
    },
    async getBrandLibraryList () {
      try {
        this.loading = true
        let query = { ...this.$route.query }
        query.currentPage = this.currentPage
        query.pageLines = this.pageSize
        if (this.searchString) query.searchString = this.searchString
        const { ResultSet } = await this.$axios.post(getBrandList, { ...query })
        this.tableData = ResultSet.userData.loadBrandList
        this.total=ResultSet.recordNumber
        this.loading = false
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getTableMenu () {
      try {
        this.loading = true
        const { ResultSet } = await this.$axios.post(getTableMenu, { type: 3 })
        this.currentList = ResultSet.userData.data ? JSON.parse(ResultSet.userData.data) : this.defaultList
        await this.getBrandLibraryList()
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async init () {
      await this.getTableMenu()
    },
    brandSearch(){
      console.log(this.searcheString)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getBrandLibraryList()
    },
    addBrand(){
      dialogVisible:true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //删除单条数据
    delBrand(row){
      // let index = this.multipleSelection[0]
      this.$confirm('是否删除该品牌？删除后所有关联材料将会下架', '提示').then(async () => {
        try {
          await this.$axios.post(deleteBrand, { idList: row.id })
          this.$message.success('删除成功');
          this.getBrandLibraryList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    
      // 添加品牌
    add () {
      this.showDialog = true
    },
    // 编辑品牌
    async edit (row) {
      console.log(row)
      // const { ResultSet } = await this.$axios.post(getBrandInformation, { id: row.brandId } )
      this.showDialog = true
      this.currentItem = row
    },

  },
  // async beforeOpen () {
  //     const { ResultSet } = await this.$axios.post(getBrandInformation, this.item.brandId)
  // },
  beforeRouteEnter (to, from, next) {
      // ...
    next(vm => {
      // vm.initFilter()
      vm.getBrandLibraryList()
      vm.init()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getBrandLibraryList()
    this.init()
    // this.initFilter()
  },
} 
</script>

<style lang="scss" scoped>
  .list {
    height: 100%;
    width: 100%;
    padding: 0 40px;
    background: #FFFFFF;
    border: 1px solid #F3F3F4;
    box-sizing: border-box;
    box-shadow: 0px 4px 0px #F3F3F4;
    border-radius: 10px;
  }
  .cont{
    height: 100%;
    padding:0;
  }
  .title{
    margin-bottom:15px;
    margin-top: 15px;
    color:#B2B4C7;
  }
  .top{
    width:100%;
    height:40px;
    margin-top:16px;
    margin-bottom:16px;
    display:flex;
    justify-content: space-between;
      .search{     
        icon-search{
          cursor: pointer;
        }         
        .ipt{
          color:#B2B4C7;
        }
        .icon-tianjia{
          color:#fff;       
        }
        .icon-tianjia:before{
          margin-right:5px;
        }
    }
      .icon-tianjia{
        background: #FF708B;
        border-radius: 6px;
        color:#fff;
      }
      .icon-tianjia:before{
        margin-right:5px;
      }
      .icon-shezhi{
        width: 46px;
        height: 32px;
        line-height:32px;
        text-align:center;
        margin-left:15px;
        color:#C4C4C4;
        background: #F6F6F9;
        border-radius: 6px;
        cursor: pointer;
      }
  }
  .table{
    height: calc(100% - 150px);
    el-table-column{
      text-align:center;
    }
    .el-table .el-table__cell{
      text-align:center;
    }
    .del{
      width:40px;
      height:30px; 
      background:#F6F6F9;
    }
  }
  .index-pagination {
    padding: 24px 0;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
    color: #7A7A7A;
  }
  .el-dialog__header{
    border-botom:1px solid #ccc;
  }
  .el-dialog__body{
    padding:0 30px!important;
  }
  .content{
    padding:0;
    h3{
      height:45px;
      line-height: 45px;
      border-top:1px solid #ccc;
      color:#8B8EAB;
    }
    .listCont{
      display:flex;
      justify-content: space-between;
      .list{
        // width:49%;
        // height:400px;
        // border:1px solid #ccc;
        // border-radius:4px;         
        h5{
          height:38px;
          line-height: 38px;
          padding:0 8px; 
          border-bottom: 1px solid #ccc;
        }  
        li{
          padding:0 8px; 
          list-style:none;
          line-height:38px;
          .toggle{
            margin-right:5px;
          }
        }   
      }
    }
  }
  .brandEdit{
    cursor: pointer;
  }
  .table-item-bd {
    &.click {
      cursor: pointer;
    }
    .table-item-head {
      width: 24px;
      height: 24px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 4px;
      margin-right: 8px;
    }
    .table-item-name {
      font-size: 14px;
      line-height: 22px;
      color: #FF2E42;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .table-item-handle {
    display: flex;
    .table-item-btn {
      margin-right: 8px;
      padding: 5px 8px;
      font-size: 12px;
      line-height: 20px;
      border-radius: 6px;
      cursor: pointer;
      &.warning {
        background: #FDEFF1;
        color: #FF2E42;
      }
      &.normal {
        background: #F3F0FF;
        color: #7362F0;
      }
      &.info {
        background: #F6F6F9;
        color: #3E4373;
      }
    }
  }
</style>

